<template>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="stateManager.editDialogVisible"
           @cancel="closeDialog"
           @ok="saveModel"
           :modal-title="modalTitle"
           model-size="normal">
        <!--
          you can use custom content here to overwrite
          default content
        -->
        <vue-form>
            <div class="row">
                <div class="col-xs-12">

                    <vue-form-item label="学期名称" :error-message="model.errors.s_name || errors.first('s_name')">
                        <input-text v-model:value="model.s_name"
                                    v-validate="'required'"
                                    label="学期名称"
                                    el-name="s_name"></input-text>
                    </vue-form-item>
                </div>
                <div class="col-xs-12">
                    <div class="row">
                        <div class="col-xs-6">
                            <vue-form-item label="开始时间" :error-message="model.errors.begin || errors.first('begin')">
                                <input-date v-model:value="model.begin"
                                            v-validate="'required'"
                                            label="开始时间"
                                            el-name="begin" ></input-date>
                            </vue-form-item>

                        </div>
                        <div class="col-xs-6">
                            <vue-form-item label="结束时间" :error-message="model.errors.end || errors.first('end')">
                                <input-date v-model:value="model.end"
                                            v-validate="'required'"
                                            label="结束时间"
                                            el-name="end" ></input-date>
                            </vue-form-item>
                        </div>
                    </div>
                </div>
            </div>
        </vue-form>


    </modal>


</template>

<script>
    export default {
        props: {
            stateManager: {
                type: Object
            }
        },
        data: function () {
            return {
                model: this.$modelDataSource({
                    url: 'api/semesters',
                    dataKey: 'model',
                    attributes: {
                        id: 0,
                        s_name:'',
                        begin:'',
                        end:''
                    }
                })
            };
        },
        methods: {
            getTime:function (time) {
//2014-07-10 10:21:12的时间戳为：1404958872
                return  Date.parse(new Date(time))/1000
            },
            closeDialog: function () {
//                console.log(11);
                this.stateManager.editDialogVisible = false;
                this.stateManager. editModelId=0;
            },
            saveModel: function () {
//                ladda.start();
                let self = this;
                self.validate(function () {
                    self.model.save(function () {
                        self.model.reset();
                        self.closeDialog();
                        self.stateManager.refreshList = true;
                        toastr.success(self.model.s_name + '保存成功！');
                    }, function () {
                        if (self.model.errors.permissions_errors) {
                            toastr.error(self.model.errors.permissions_errors);
                        }
                    });
                });
            },

            validate: function (successCallback, failedCallback) {
                this.$validator.validateAll().then(() => {
                    // eslint-disable-next-line
                    console.log('验证通过');
                    typeof successCallback === 'function' && successCallback();
                }).catch(() => {
                    // eslint-disable-next-line
                    console.log('验证未通过');
                    typeof failedCallback === 'function' && failedCallback();
                });

            }
        },
        computed: {
            modalTitle: function () {
                if (this.model.id === 0) {
                    return '添加学期信息';
                } else {
                    return '编辑学期信息';
                }
            }
        },
        watch: {
            'stateManager.editModelId': function (newValue) {
                this.model.fetch(newValue);

            }
        }
    }
</script>